<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <a href="https://ng.ant.design/" target="_blank">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
        <h1>Ant Design Of Angular</h1>
      </a>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-menu-item nzMatchRouter routerLink="/index">
        <i nz-icon nzType="home"></i>
        <span>主页</span>
      </li>
      <li nz-submenu nzOpen nzTitle="用户管理" nzIcon="user"
          *ngIf="userInfo && userInfo.authorities && userInfo.authorities.length !== 0">
        <ul>
          <li nz-menu-item nzMatchRouter *ngIf="matchAuthority('showPersonalRole')">
            <a routerLink="/showPersonalRole">查看个人角色</a>
          </li>
          <li nz-menu-item nzMatchRouter *ngIf="matchAuthority('showPersonalDetail')">
            <a routerLink="/showPersonalDetail">查看个人信息</a>
          </li>
          <li nz-menu-item nzMatchRouter *ngIf="matchAuthority('updatePersonalDetail')">
            <a routerLink="/updatePersonalDetail">编辑个人信息</a>
          </li>
          <li nz-menu-item nzMatchRouter *ngIf="matchAuthority('showUserList')">
            <a routerLink="/showUserList">查看用户列表</a>
          </li>
          <li nz-menu-item nzMatchRouter *ngIf="matchAuthority('showUserDetail')">
            <a routerLink="/showUserDetail">查看用户详情</a>
          </li>
          <li nz-menu-item nzMatchRouter *ngIf="matchAuthority('resetUserPassword')">
            <a routerLink="/resetUserPassword">重置用户密码</a>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>

        <div class="login-div" *ngIf="!userInfo || !userInfo.user_name">
          <button nz-button nzType="primary" routerLink="/login">登录</button>
          &nbsp;
          <button nz-button nzType="primary" (click)="sso()">单点登录</button>
        </div>

        <div class="login-div" *ngIf="!!userInfo && !!userInfo.user_name">
          您好，{{userInfo.user_name}}！
          <button nz-button nzType="primary" (click)="logout()">注销</button>
        </div>

      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>
